import React from 'react';


import styles from './Login.css';
import { Form,FormGroup,Col,FormControl,Checkbox,ControlLabel,Button  } from 'react-bootstrap';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
} from 'react-router-dom';
let styleObj={
    _padding:{
        'paddingLeft':'0px',
        'paddingRight':'0px'
    },
    errorColor:{
        color:'red',
        fontSize:'12px',
        paddingLeft:'0px',
    }
};
const formInstance=(btnClick,registeredClick,datainfor)=> {
    let errorInfor=datainfor.code==3000
    return(
        <Form horizontal>
            <FormGroup controlId="formControlsSelect">
                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                    职务:
                </Col>
                <Col sm={10} style={styleObj._padding}>
                    <FormControl componentClass="select" placeholder="select">
                        <option value="1">学生</option>
                        <option value="2">管理员</option>
                    </FormControl>
                </Col>
            </FormGroup>
            <FormGroup  controlId="accountNumberId" >
                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                    学号:
                </Col>
                <Col sm={10} style={styleObj._padding} >
                    <FormControl type="text" placeholder="请输入学号"/>
                </Col>
            </FormGroup>
            <FormGroup controlId="formHorizontalPassword" >
                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                    密码:
                </Col>
                <Col sm={10} style={styleObj._padding}>
                    <FormControl type="password" placeholder="请输入用户密码"/>
                </Col>
            </FormGroup>

            {errorInfor?(<FormGroup >
                <Col sm={10} smOffset={2} style={styleObj._padding,styleObj.errorColor} >
                    {datainfor.message}
                </Col>
            </FormGroup>):null}
            <FormGroup>
                <Col sm={12} style={styleObj._padding}>
                    <Button bsStyle="primary"  style={{'width':'100%'}} onClick={btnClick}>登录</Button>
                </Col>
            </FormGroup>
            <Link to="/registered" className={styles.registered}>注册</Link>
        </Form>
    )
};


class Login extends React.Component{
    constructor(){
        super();
        this.state={
            datainfor:{},
        };
        this.loginClick=this.loginClick.bind(this);
    }
    loginClick(){
        let _accountNumberDom=document.getElementById('accountNumberId');
        let _inputPasswordDom=document.getElementById('formHorizontalPassword');
        let _formControlsSelect=document.getElementById('formControlsSelect');
        let _url='http://library.loverent.cn:8080/students/login?';
        fetch(_url+`account_number=${_accountNumberDom.value}&password=${_inputPasswordDom.value}&type=${_formControlsSelect.value}`)
            .then(response=>response.json())
            .then(json=>{
                this.setState({'datainfor':json});
                if(json.code===1){
                    window.location.href='http://localhost:9000/homepage';
                }
                console.log(json);
            }).catch(function(error) {
                console.log('There has been a problem with your fetch operation: ' + error.message);
            });
        //get请求不能带body
        // fetch('http://library.loverent.cn:8080/students/login',{
        //     method: "GET",
        //     body: JSON.stringify(data),
        //     headers: {
        //         "Content-Type": "application/json"
        //     },
        // }).then(response=>response.json())
        // .then(json=>{
        //     console.log(self.fetch);
        //     this.setState({'datainfor':json});
        //     console.log(json);
        // }).catch(function(error) {
        //     console.log('There has been a problem with your fetch operation: ' + error.message);
        // });

    }
    registeredClick(){
        console.log(1);
    }
    render(){
        console.log(this.props.title);
        return(
            <div className={styles.root}>
              <h3 className={styles.h3_title}>登录界面</h3>
              <div className={styles.formbox}>
                {formInstance(this.loginClick,this.registeredClick,this.state)}
              </div>
            </div>
        )
    }
}
export default Login;